<template>
	<section>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="驾驶员基础信息" name="first">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-row type="flex" justify="center" :gutter="50">
						<el-col :span="10">
							<el-form-item label="司机姓名:">
								王凯
							</el-form-item>
							<el-form-item label="身份证号:">
								320965874598569812
							</el-form-item>
							<el-form-item label="保险信息:">
								保险名称及照片
							</el-form-item>
							<el-form-item label="备注:">
								备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注
							</el-form-item>
							

						</el-col>
						<el-col :span="10">
							<el-form-item label="联系方式:">
								1398746985252
							</el-form-item>
							<el-form-item label="联系人:">
								宋强
							</el-form-item>
							<el-form-item label="供应商:">
								供应商名称名称
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-row type="flex">
					<el-col :span="4" v-for="fit in fits" :key="fit" :offset="3">
						<span class="title">{{ fit }}</span>
						<img :src="url" width="100%">
					</el-col>
				</el-row>
			</el-tab-pane>			
		</el-tabs>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'right',
				activeName: 'first',
				fits: ['驾驶证：', '驾驶员照片：', '身份证正面：','身份证反面：'],   //驾驶员基础信息				
				url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',				
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},			
		}
	}
</script>
<style>
	.title{
		padding:0 0 10px;
		display: block;
	}
	

</style>
